import { type FC } from 'react';
import { View, Text } from 'react-native';
import { ImageBackground } from 'expo-image';
import AntDesign from '@expo/vector-icons/AntDesign';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { StatusBar } from 'expo-status-bar';
import { Button } from '@/components';
import styles from './styles';

type StepWrapperProps = {
  title: string;
  desc: string;
  next?: boolean;
  disabled?: boolean;
  onSubmit?: () => void;
  children?: any;
  buttonText: string;
}

const StepWrapper: FC<StepWrapperProps> = (props) => {
  const { next = true } = props;
  const { top } = useSafeAreaInsets();

  const coverStyle = [
    styles.topCover,
    { paddingTop: top }
  ];

  return (
    <View style={styles.container}>
      <StatusBar style="light" />
      <ImageBackground
        style={coverStyle}
        source={require('@/assets/images/top-cover.png')}
      >
        <Text style={styles.title}>
          {props.title}
        </Text>
      </ImageBackground>
      <View style={styles.content}>
        {props.children}
      </View>
      <View style={styles.submiter}>
        <Button
          type="primary"
          title={props.buttonText}
          disabled={props.disabled}
          onPress={props.onSubmit}
          suffix={next ? (
            <AntDesign
              name="right"
              color="#fff"
              size={18}
            />
          ) : null}
        />
      </View>
    </View>
  );
}

export default StepWrapper;